import React, {FC, useState} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import HxIcon from "@/components/HxIcon";
import {HxArticleSimpleItem} from '@/components/HxArticleItem';
import HxButtonRadioGroup from "@/components/HxButtonRadioGroup";
import HxStList from "@/components/HxStList";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Empty, Spin} from "antd";
import {FormattedMessage} from "umi";


interface HotArticlesProps {
  journalId?: API.EntityId,
}

const HotArticles: FC<HotArticlesProps> = (props) => {
  const {journalId} = props;
  const [sortCondition, setSortCondition] = useState<"DOWNLOAD_NUM" | "ACCESS_NUM" | "CITING_ARTICLE_NUM">("DOWNLOAD_NUM")

  const dataReq = useRequest(() => API.queryFrontArticles({
    pageSize: 10,
    journalId,
    periodZ: false,
    hotType: sortCondition,
  }), {
    refreshDeps: [sortCondition]
  });

  const data = dataReq?.data?.data || [];

  return (
    <HxCyCard
      className={"hot-articles-list-card"}
      icon={<HxIcon type={"hxicon-hotfill"} style={{color: "#EC1212"}}/>}
      title={"热点文章"}
      subtext={"Hot Articles"}>

      <HxStList title={(
        <HxButtonRadioGroup value={sortCondition} onChange={(e) => setSortCondition(e.target.value)} options={[
          {label: <FormattedMessage id="stats.downloads"/>, value: 'DOWNLOAD_NUM'},
          {label:  <FormattedMessage id="stats.visits"/>, value: 'ACCESS_NUM'},
          {label:  <FormattedMessage id="stats.citation"/>, value: 'CITING_ARTICLE_NUM'},
        ]}/>
      )}>
        <Spin spinning={dataReq.loading}>
          {
            data.length > 0 ? (
                data?.map((item, index) => (
                  <HxArticleSimpleItem  key={item.id} showCover={index === 0} coverPosition={"right"} seq={index + 1} showTop3SeqColor={true} article={item}/>
                ))
              )
              :
              <Empty/>

          }
        </Spin>
      </HxStList>
    </HxCyCard>
  );
};

export default HotArticles;
